<template>
  <div class="detail-head">
    <div class="head-top" v-show="isShow">
      <div @click="goBack">
        <span class="head-bg"></span>
        <i class="iconfont">&#xe630;</i>
      </div>
    </div>
    <div class="detail-fix" v-show="!isShow" :style="styleOpacity">
      <div class="head-left" @click="goBack">
        <span class="iconfont">&#xe630;</span>
      </div>
      <div class="head-title">
        {{ tripsItem.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailHead",
  props: {
    tripsItem: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      isShow: true,
      styleOpacity: {
        opacity: 0
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  },
  mounted() {
    window.addEventListener('scroll',() => {
      // 在这里window.pageYOffset于document.documentElement.scrollTop相等，用哪个都可以
      // console.log(document.documentElement.scrollTop)
      // console.log(window.pageYOffset)
      let top = window.pageYOffset
      if (top > 44) {
        let opacity = top / 130
        opacity = opacity > 1 ? 1 : opacity
        // console.log(opacity)
        this.styleOpacity = {opacity: opacity}
        this.isShow = false
      }else {
        this.isShow = true
      }
    })
  }
}
</script>

<style scoped>
  .detail-head {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9;
  }
  .head-top {
    height: .88rem;
  }
  .head-bg {
    position: absolute;
    left: .1rem;
    top: .1rem;
    width: .68rem;
    height: .68rem;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
  }
  .iconfont {
    position: absolute;
    left: .28rem;
    top: .2rem;
    font-size: .5rem;
    color: #fff;
  }
  .detail-fix {
    height: .88rem;
    display: flex;
    background: var(--color-background);
  }
  .head-left {
    width: .88rem;
    text-align: center;
    font-weight: bold;
  }
  .head-title {
    width: calc(100% - .68rem);
    color: #fff;
    line-height: .88rem;
    font-size: .38rem;
    text-align: center;
  }
</style>
